<template>
  <a-drawer
    :width="600"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    title="菜单设置"
    class="form-drawer"
  >
    <a-form-model
      :model="menuForm"
      ref="menuForm"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="form-model"
    >
      <a-form-model-item label="菜单编码：" prop="menuCode">
        <a-input v-model="menuForm.menuCode" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="菜单名称：" prop="menuName">
        <a-input v-model="menuForm.menuName" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="菜单URL：" prop="path">
        <a-input v-model="menuForm.path" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="菜单级别：" prop="level">
        <a-input
          v-model="menuForm.level"
          placeholder="请输入"
          allow-clear
          type="number"
        ></a-input>
      </a-form-model-item>
      <a-form-model-item label="排序：" prop="orderNum">
        <a-input
          v-model="menuForm.orderNum"
          placeholder="请输入"
          allow-clear
          type="number"
        ></a-input>
      </a-form-model-item>
      <a-form-model-item label="父级菜单：" prop="parentId">
        <a-select
          show-search
          class="select"
          v-model="menuForm.parentId"
          placeholder="请选择"
          style="width: 410px"
          :filter-option="filterOption"
          allow-clear
        >
          <a-select-option :value="item.id" v-for="(item, index) in parentList" :key="index">
            {{ item.menuName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="是否显示：">
        <a-switch v-model="menuForm.hiddenValue" />
      </a-form-model-item>
      <!-- <a-form-model-item label="外部跳转链接">
        <a-input placeholder="请输入" v-model="menuForm.target" allow-clear></a-input>
      </a-form-model-item> -->
      <a-form-model-item label="菜单图标" prop="icon" v-if="!menuForm.parentId">
        <upload-image v-model="menuForm.icon" uploadMode="manual" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 18, offset: 3 }">
        <a-button type="primary" @click="menuSubmit" :loading="submitLoading">保存</a-button>
        <a-button @click="onClose">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { getAllMenuList, addMenu, getMenuInfo } from '@/api/system'
import UploadImage from '@/components/UploadImage'
export default {
  name: 'MenuForm',
  data () {
    return {
      visible: false,
      menuForm: {
        hiddenValue: true
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      rules: {
        menuCode: [{ required: true, message: '菜单编码不能为空' }],
        menuName: [{ required: true, message: '菜单名称不能为空' }],
        orderNum: [{ required: true, message: '排序不能为空' }],
        level: [{ required: true, message: '菜单级别不能为空' }],
        path: [{ required: true, message: '菜单URL不能为空' }]
      },
      parentList: [],
      submitLoading: false
    }
  },
  methods: {
    open (record = {}) {
      if (record.id) {
        this.getMenuInfo(record.id)
      }
      this.visible = true
    },
    onClose () {
      this.visible = false
    },
    afterVisibleChange (val) {
      console.log('visible', val)
      if (!val) {
        this.menuForm = {
          menuCode: '',
          menuName: '',
          path: '',
          orderNum: '0',
          parentId: '',
          hiddenValue: true,
          icon: ''
        }
      }
      this.getParentList()
    },
    getParentList () {
      getAllMenuList({}).then((res) => {
        console.log(res)
        this.parentList = res.data
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    getMenuInfo (id) {
      getMenuInfo(id).then((res) => {
        console.log(res)
        res.data.hiddenValue = res.data.visible == 1
        res.data.parentId = res.data.parentId === 0 ? null : res.data.parentId
        this.menuForm = res.data
      })
    },
    menuSubmit () {
      this.menuForm.visible = this.menuForm.hiddenValue ? '1' : '0'
      this.$refs.menuForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          addMenu(this.menuForm)
            .then((res) => {
              this.$notification['success']({
                message: '提示',
                description: `${this.menuForm.id ? '编辑' : '新增'}成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
            .catch(() => {
              this.submitLoading = false
            })
        }
      })
    }
  },
  components: {
    UploadImage
  }
}
</script>

<style></style>
